<template>

  <div class="person">
    姓: <input type="text" v-model="firstName"> <br> <!-- 绑定一下 -->
    名: <input type="text" v-model="lastName"> <br>
    全名: <span>{{ fullName3 }}</span>
    <button @click="changeFullName">点我改变全名</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, reactive, toRefs, toRef, computed} from 'vue'

let firstName = ref('find')
let lastName = ref('you')
//方法是没缓存的



/* 计算属性 有缓存哦 调用多个 只计算一次 这么定义的是 只能读的额不可修改*/
let fullName = computed(()=>{ // 不用this 就可以用箭头函数
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '--' + lastName.value
})

//可以修改 可以读写的
let fullName3 = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '--' + lastName.value
  },
  set(val) { // vl是修改后的值
    const[s1, s2] = val.split('-')
    firstName.value = s1
    lastName.value = s2
    alert('修改了姓名')
  }
})

//定义的一个函数
let fullName2 = function changeFullName2() {
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '--' + lastName.value
}
function changeFullName() {
  fullName3.value = 'li-si' // 引起了set的注意力
}

</script>



<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>